<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-06-28 15:09:34
 * @FilePath: /src/views/schedule/index.vue
 * @LastEditTime: 2021-07-14 19:29:58
 * @LastEditors: luojiajun
-->
<template>
   <div class="app-container app-height schedule">
      <div class="bg-white">
         <el-form label-width="100px" class="schedule-form">
            <el-form-item label="任务类型" class="float-left">
               <el-select v-model="ruleForm.type" placeholder="请选择任务类型" clearable>
                  <el-option
                     v-for="item in scheduleTypeOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                  >
                  </el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="进度" class="float-left">
               <el-select
                  v-model="ruleForm.status"
                  placeholder="请选择进度状态"
                  clearable
               >
                  <el-option
                     v-for="item in scheduleStatusOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                  >
                  </el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="创建人" class="float-left">
               <el-input
                  v-model="ruleForm.operator"
                  aria-placeholder="请输入创建人"
                  clearable
               ></el-input>
            </el-form-item>
            <el-form-item label="时间" class="float-left">
               <el-date-picker
							v-model="ruleForm.datetime"
							type="datetimerange"
							:picker-options="pickerOptions"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							@change="changeDatetimePicker"
							align="left"
                     clearable>
						</el-date-picker>
            </el-form-item>

            <el-form-item class="schedule-form-btn float-left">
               <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="fetchData"
                  >查询</el-button
               >
            </el-form-item>
         </el-form>
         <el-table
            v-loading="loading"
            :data="tableList"
            :max-height="mapHeight"
            border
         >
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column
               label="任务类型"
               align="center"
               prop="taskType"
               width="100"
            ></el-table-column>
            <el-table-column
               label="任务内容"
               align="center"
               prop="content"
               show-overflow-tooltip
            ></el-table-column>
            <el-table-column
               label="任务开始时间"
               align="center"
               prop="createTime"
               width="165"
            ></el-table-column>
            <el-table-column
               label="创建人"
               align="center"
               prop="operator"
               width="150"
            ></el-table-column>
            <el-table-column
               label="进度"
               align="center"
               prop="speedOfProgress"
               width="100"
            ></el-table-column>
            <el-table-column
               label="任务完成时间"
               align="center"
               prop="completeTime"
               width="165"
            >
               <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.completeTime || '-' }}</span>
               </template>
            </el-table-column>
            <el-table-column
               label="任务耗时"
               align="center"
               prop="useTime"
               width="165"
            >
               <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.useTime || '-' }}</span>
               </template>
            </el-table-column>
            <el-table-column
               label="操作"
               align="center"
               prop="result"
               width="80"
            >
               <template slot-scope="scope">
                  <p v-if="scope.row.result"
                     class="primary-simple-btn simple-btn"
                     plain
                     @click="downloadhandle(scope.row)" >
                  下载
                  </p>
               </template>
            </el-table-column>
            <el-table-column
               label="备注"
               align="center"
               prop="remarks"
               show-overflow-tooltip
            >
               <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.remarks || '-' }}</span>
               </template>
            </el-table-column>
         </el-table>
         <pagination
            v-show="totalNum > 0"
            :total="totalNum"
            :page.sync="ruleForm.pageNum"
            :limit.sync="ruleForm.pageSize"
            @pagination="fetchData"
         />
      </div>
   </div>
</template>

<script>
import { scheduleList } from "@/api/dataService/schedule.js";
import { getHeight } from "@/utils/zkComm";

export default {
   name: "Schedule",
   data() {
      return {
         loading: false,
         ruleForm: {
            pageNum: 1,
            pageSize: 30,
            type: "",
            status: "",
            operator: "",
            datetime: [],
            startTime: '',
            endTime: '',
         },
         scheduleTypeOptions: [{
            label: '复制',
            value: '2'
         },
         {
            label: '导出',
            value: '1'
         }],
         scheduleStatusOptions: [{
            label: '进行中',
            value: '2'
         },
         {
            label: '成功',
            value: '1'
         },
         {
            label: '失败',
            value: '0'
         }],
         tableList: [],
         totalNum: 0,
         mapHeight: undefined,
         pickerOptions: {},
      };
   },
   created() {
      this.fetchData();
   },
   mounted() {
      this.mapHeight = getHeight(true) - 60;
   },
   methods: {
      changeDatetimePicker(data){
         let startTime = '', endTime = ''
         if (data && data.length) {
            startTime = this.parseTime(new Date(data[0]),'{y}-{m}-{d} {h}:{i}:{s}');
			   endTime = this.parseTime(new Date(data[1]),'{y}-{m}-{d} {h}:{i}:{s}');
         }
			this.ruleForm.startTime = startTime;
			this.ruleForm.endTime = endTime;
		},
      fetchData() {
         let params = {
            taskType: this.ruleForm.type,
            speedOfProgress: this.ruleForm.status,
            operator: this.ruleForm.operator,
            startTime: this.ruleForm.startTime,
            endTime: this.ruleForm.endTime,
            pageNum: this.ruleForm.pageNum,
            pageSize: this.ruleForm.pageSize,
         }

         scheduleList(params)
            .then(res => {
               if (res.code == 200) {
                  this.tableList = res.data.records
                  this.totalNum = res.data.total
               }
               this.loading = false;
            })
            .catch(() => {
               this.loading = false;
            });
      },
      // 下载按钮
      downloadhandle(data){
         this.download(data.result)
      }
   }
};
</script>

<style lang="scss" scoped>
.app-container {
   padding: 20px;
}
.schedule ::v-deep {
   .el-form-item__label {
      text-align: right;
   }
}
</style>
